<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="" type="image/x-icon">
    <meta content="telephone=no,email=no" name="format-detection">
    <title>滑动删除</title>
    <link rel="stylesheet" href="./style.css"/>
    <style>
        .item_btn_del {
            position: absolute;
            top:0;right:-120px;height:100%;width:60px;line-height:86px;background-color:red;color:#fff;text-align:center;
        }
        .item_btn_cancel {
            position: absolute;
            top:0;right:-60px;height:100%;width:60px;line-height:86px;background-color:black;color:#fff;text-align:center;
        }
    </style>
</head>
<body>

<div id="container">

    <div class="quan-panel no-top">

        <div class="quan-panel__bd" id="list">

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">左滑删除功能
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的左滑删除功能demo-111
                </div>
            </div>

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">左滑删除功能
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的左滑删除功能demo-222
                </div>
            </div>

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">左滑删除功能
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的左滑删除功能demo-333
                </div>
            </div>

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">左滑删除功能
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的左滑删除功能demo--444
                </div>
            </div>

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">左滑删除功能
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的左滑删除功能demo-555
                </div>
            </div>

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">左滑删除功能
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的左滑删除功能demo-666
                </div>
            </div>

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">左滑删除功能
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的左滑删除功能demo-777
                </div>
            </div>

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">左滑删除功能
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的左滑删除功能demo-888
                </div>
            </div>

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">左滑删除功能
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的左滑删除功能demo-999
                </div>
            </div>

            <div class="quan-media-box">
                <div class="quan-media-box__person">
                    <img class="person_avator" src="./img/etc_img_free.png">
                    <div class="person_content">
                        <div class="person_content-title">左滑删除功能
                            <span class="person_content__tag hide author">圈主</span>
                            <span class="person_content__tag top">置顶</span>
                            <span class="person_content__tag hot">精华</span>
                        </div>
                        <div class="person_content-text">2017.10.28 11:37</div>
                    </div>
                </div>
                <div class="quan-media-box__content ellips-content">
                    原生js实现的左滑删除功能demo-000
                </div>
            </div>
        </div>
    </div>

    <div class="quan-loadmore">数据加载中...</div>
</div>

<script src="./slideLeftAction.js"></script>
<script type="text/javascript">
    var sla = new slideLeftAction({
        container: '.quan-media-box',
        moveCount: 120, //和按钮的宽度总和相等
        buttons: [{
            text: '删除',
            class: 'item_btn_del',
            click: function (e) {
                var el = e.target.parentNode;
                console.log('click删除', el);
                el.remove();
            }
        },{
            text: '取消',
            class: 'item_btn_cancel',
            click: function (e) {
                var el = e.target.parentNode;
                console.log('click取消', el);
                el.classList.remove('move-out-click');
                sla._transform(el, 'TransitionDuration', '125ms');
                sla._transform(el, 'Transform', 'translateX(0px)');
            }
        }]
    });
</script>

</body>
</html>
